// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager, TextInput } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { InputItem, Tabs, Toast, Portal, List, Picker, DatePicker } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { relationRequest } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, hotTextColor, borderBottom , defaultDataList,onEndReached,onRefresh ,concatDataList,defaultPage} from '../../util/utils.js'

class AddMyRelatives extends Component {

  constructor(props) {
    super(props)
    this.state = {
      remark: '',
      phone: '',
      relativesList: [{ value: 1, label: '爸爸' }, { value: 2, label: '妈妈' }, { value: 3, label: '女儿' }, { value: 4, label: '儿子' }, { value: 5, label: '妻子' }, { value: 6, label: '丈夫' }],
      relatives: null,
      relation: '',
      genderList: [{ value: 1, label: '男' }, { value: 2, label: '女' }],
      gender: '',
      birthday: '',
    }
  }


  componentDidMount() {
  }


  // 账号关联请求
  relationRequest() {
    const { phone, relation, remark } = this.state
    if (!relation) {
      Toast.info('请选择亲人关系', 1);
      return;
    }
    if (!phone) {
      Toast.info('请输入亲人手机号', 1);
      return;
    }
    if (!remark) {
      Toast.info('请输入亲人姓名', 1);
      return;
    }
    relationRequest({ phone, relation, remark }).then(res => {
      Toast.success(res.message, 1, () => {
        Actions.pop()
        Actions.refresh()
      });
    }).catch(error => {
      console.log(error, 222)
      Toast.info(error.message, 1);
    })
  }


  render() {
    const { remark, phone, relativesList, relation, relatives, genderList, gender, birthday, } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="关联亲人"
          back={true}
        />
        <ScrollView style={Style.content}>
          <View style={{ paddingLeft: 15 }}>
            <Picker
              data={relativesList}
              cols={1}
              value={relatives}
              onChange={(value) => {
                console.log(value)
                this.setState({
                  relation: relativesList[value[0] - 1].label,
                  relatives: value
                })
              }}
            >
              <TouchableOpacity style={{
                height: 50,
                padding: 0,
                paddingRight: 15,
                ...borderBottom()
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 50, }}>{relation || '关系'}</Text>
              </TouchableOpacity>
            </Picker>
            <TextInput
              onChangeText={(value) => this.setState({ remark: value })}
              placeholder="姓名"
              value={remark}
              placeholderTextColor="#61676F"
              style={{
                height: 50,
                lineHeight: 30,
                paddingTop: 10,
                paddingBottom: 10,
                padding: 0,
                paddingRight: 15,
                color: '#333',
                fontSize: 14,
                ...borderBottom()
              }}
              underlineColorAndroid="transparent"
            />
            <TextInput
              onChangeText={(value) => this.setState({ phone: value })}
              keyboardType="numeric"
              placeholder="手机号码"
              value={phone}
              placeholderTextColor="#61676F"
              style={{
                height: 50,
                lineHeight: 30,
                paddingTop: 10,
                paddingBottom: 10,
                padding: 0,
                paddingRight: 15,
                color: '#333',
                fontSize: 14,
                ...borderBottom()
              }}
              underlineColorAndroid="transparent"
            />
            {/* <Picker
              data={genderList}
              cols={1}
              value={gender}
              onChange={(value) => {
                this.setState({
                  gender: value.label
                })
              }}
            >
              <TouchableOpacity style={{
                height: 50,
                padding: 0,
                paddingRight: 15,
                ...borderBottom()
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 50, }}>{gender || '性别'}</Text>
              </TouchableOpacity>
            </Picker>
            <DatePicker
              value={birthday}
              mode="date"
              defaultDate={new Date()}
              maxDate={new Date()}
              format="YYYY-MM-DD"
              onChange={(value) => {
                this.setState({ value });
              }}
            >
              <TouchableOpacity style={{
                height: 50,
                padding: 0,
                paddingRight: 15,
                ...borderBottom()
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 50, }}>{birthday || '生日'}</Text>
              </TouchableOpacity>
            </DatePicker> */}
            {/* <Picker
              data={province}
              cols={1}
              value={provinceId}
              onChange={(value) => {
                this.setState({
                  provinceId: value[0],
                  provinceName: province.filter((item) => {
                    if (item.value == value[0]) {
                      return item
                    }
                  })[0].label
                })
                this.region(value[0], 'city')
              }}
            >
              <TouchableOpacity style={{
                height: 50,
                padding: 0,
                paddingRight: 15,
                ...borderBottom()
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 50, }}>{provinceName || '生日'}</Text>
              </TouchableOpacity>
            </Picker> */}
          </View>
          <View style={{ padding: 15 }}>
            <TouchableOpacity
              onPress={() => {
                this.relationRequest()
              }}
              style={{
                paddingVertical: 14,
                paddingHorizontal: 20,
                backgroundColor: hotTextColor,
                borderRadius: 6,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>确认绑定账号</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(AddMyRelatives))
